<ul class="menu">
</ul>
<div class="menu-content">
    <div class="tabs"></div>
    <div class="details"></div>
</div>
<script>
    (function () {
        $.ajax({
            url: '/menu',
            dataType: 'json',
            success: function (res) {
                console.log(res);
                menuData = res.data;
                //获取到数据，渲染页面
                renderMenuList(menuData);
            }
        })
        //渲染左侧菜单栏
        function renderMenuList(data) {
            var oLiArr = data.map(function (items) {
                var oAs = items.titles.map(function (item) {
                    return `<a href="${item.href}">${item.name}</a>`
                })
                return `<li class="menu-titles">${oAs.join('/')}</li>`
            })

            $('.menu').html(oLiArr.join(''));
        }

        //鼠标移入菜单栏
        $('.menu').on('mouseenter', 'li', function () {
            $(this).addClass('menu-active').siblings().removeClass('menu-active');
            var index = $(this).index();
            renderMenuContent(menuData[index].content);
            // console.log(menuData[index].content)
            $('.menu-content').show();
        })
        // 渲染右侧内容区
        function renderMenuContent(data) {
            var tabsData = data.tabs;
            var detailsData = data.details;

            var tabsArr = tabsData.map(function (item) {
                return `<a href="${item.href}">${item.name}<i class="iconfont">&#xe625;</i></a>`;
            })
            $('.menu-content > .tabs').html(tabsArr.join(''));

            // dl dt dd
            var oDl = detailsData.map(function (detail) {
                var oDt = `<dt><a>${detail.category}<i class="iconfont">&#xe625;</i></a></dt>`;
                var oAs = detail.items.map(function (items) {
                    return `<a href="${items.href}">${items.name}</a>`
                })
                var oDd = `<dd>${oAs.join('')}</dd>`
                return `<dl class="details-content">${oDt}${oDd}</dl>`
            });
            $('.menu-content .details').html(oDl);
        }

        $('.fs-1').mouseleave(function () {
            $('.menu-content').hide();
            $('.menu li').removeClass('menu-active')
        })

    }())
</script>